<template>
	<div class="right-side-container">
		<el-card>
			<template #header> <span style="margin-left: -10px">快捷工具</span> </template>
			<div class="tools-body">
				<div class="tools-item" @click="IPSearch('IP查询')">
					<img
						style="width: 36px; height: 36px"
						src="https://lf-cdn-tos.bytescm.com/obj/static/xitu_extension/static/icon-ip-lookup-normal.25ef5c44.svg"
						alt=""
					/>
					<span>IP查询</span>
				</div>
				<div class="tools-item" @click="IPSearch('时间戳')">
					<img
						style="width: 36px; height: 36px"
						src="https://lf-cdn-tos.bytescm.com/obj/static/xitu_extension/static/icon-timestamp-tool-normal.15bacf97.svg"
						alt=""
					/>
					<span>时间戳</span>
				</div>
				<div class="tools-item" @click="IPSearch('二维码')">
					<img
						style="width: 36px; height: 36px"
						src="https://lf-cdn-tos.bytescm.com/obj/static/xitu_extension/static/icon-qrcode-tool-normal.58e6904a.svg"
						alt=""
					/>
					<span>二维码</span>
				</div>
				<div class="tools-item" @click="IPSearch('翻译')">
					<img
						style="width: 36px; height: 36px"
						src="https://lf-cdn-tos.bytescm.com/obj/static/xitu_extension/static/icon-translate-tool-normal.e9ae8872.svg"
						alt=""
					/>
					<span>翻译</span>
				</div>
			</div>
		</el-card>
		<el-card class="fd-body">
			<template #header>
				<div class="side-header">
					<span style="margin-left: -10px">沸点</span>
					<div class="header-right">
						<span class="active">推荐</span>
						<el-divider direction="vertical"></el-divider>
						<span>最新</span>
					</div>
				</div>
			</template>
			<div class="fd-list">
				<div class="fd-item" v-for="(item,index) in fdList" :key="index">
					<div class="fd-title">
						<span>{{item.title}}</span>
					</div>
					<div class="fd-footer">
						<div class="foot-left">
							<span>{{item.name}}</span>
						</div>
						<div class="foot-right">
							<div class="right-item">
								<svg
									t="1645093414123"
									class="icon"
									viewBox="0 0 1024 1024"
									version="1.1"
									xmlns="http://www.w3.org/2000/svg"
									p-id="8837"
									width="16"
									height="16"
								>
									<path
										d="M885.9 533.7c16.8-22.2 26.1-49.4 26.1-77.7 0-44.9-25.1-87.4-65.5-111.1a67.67 67.67 0 0 0-34.3-9.3H572.4l6-122.9c1.4-29.7-9.1-57.9-29.5-79.4-20.5-21.5-48.1-33.4-77.9-33.4-52 0-98 35-111.8 85.1l-85.9 311H144c-17.7 0-32 14.3-32 32v364c0 17.7 14.3 32 32 32h601.3c9.2 0 18.2-1.8 26.5-5.4 47.6-20.3 78.3-66.8 78.3-118.4 0-12.6-1.8-25-5.4-37 16.8-22.2 26.1-49.4 26.1-77.7 0-12.6-1.8-25-5.4-37 16.8-22.2 26.1-49.4 26.1-77.7-0.2-12.6-2-25.1-5.6-37.1zM184 852V568h81v284h-81z m636.4-353l-21.9 19 13.9 25.4c4.6 8.4 6.9 17.6 6.9 27.3 0 16.5-7.2 32.2-19.6 43l-21.9 19 13.9 25.4c4.6 8.4 6.9 17.6 6.9 27.3 0 16.5-7.2 32.2-19.6 43l-21.9 19 13.9 25.4c4.6 8.4 6.9 17.6 6.9 27.3 0 22.4-13.2 42.6-33.6 51.8H329V564.8l99.5-360.5c5.2-18.9 22.5-32.2 42.2-32.3 7.6 0 15.1 2.2 21.1 6.7 9.9 7.4 15.2 18.6 14.6 30.5l-9.6 198.4h314.4C829 418.5 840 436.9 840 456c0 16.5-7.2 32.1-19.6 43z"
										p-id="8838"
										fill="#1e80ff"
									></path>
								</svg>
								<span>{{item.like}}</span>
							</div>
							<div class="right-item">
								<svg
									t="1645093481425"
									class="icon"
									viewBox="0 0 1024 1024"
									version="1.1"
									xmlns="http://www.w3.org/2000/svg"
									p-id="9788"
									width="16"
									height="16"
								>
									<path
										d="M157.568 751.296c-11.008-18.688-18.218667-31.221333-21.802667-37.909333A424.885333 424.885333 0 0 1 85.333333 512C85.333333 276.362667 276.362667 85.333333 512 85.333333s426.666667 191.029333 426.666667 426.666667-191.029333 426.666667-426.666667 426.666667a424.778667 424.778667 0 0 1-219.125333-60.501334 2786.56 2786.56 0 0 0-20.053334-11.765333l-104.405333 28.48c-23.893333 6.506667-45.802667-15.413333-39.285333-39.296l28.437333-104.288z m65.301333 3.786667l-17.258666 63.306666 63.306666-17.258666a32 32 0 0 1 24.522667 3.210666 4515.84 4515.84 0 0 1 32.352 18.944A360.789333 360.789333 0 0 0 512 874.666667c200.298667 0 362.666667-162.368 362.666667-362.666667S712.298667 149.333333 512 149.333333 149.333333 311.701333 149.333333 512c0 60.586667 14.848 118.954667 42.826667 171.136 3.712 6.912 12.928 22.826667 27.370667 47.232a32 32 0 0 1 3.338666 24.714667z m145.994667-70.773334a32 32 0 1 1 40.917333-49.205333A159.189333 159.189333 0 0 0 512 672c37.888 0 73.674667-13.173333 102.186667-36.885333a32 32 0 0 1 40.917333 49.216A223.178667 223.178667 0 0 1 512 736a223.178667 223.178667 0 0 1-143.136-51.690667z"
										p-id="9789"
										fill="#1e80ff"
									></path>
								</svg>
								<span>{{item.comment}}</span>
							</div>
						</div>
					</div>
				</div>
			</div>
		</el-card>
	</div>
</template>
<script lang="ts"> 
import { defineComponent, reactive,toRefs } from 'vue'

export default defineComponent({
  emits: [
    'openDrawer'
  ],
  setup(props,context) {
    const state=reactive({
      fdList: [
        {
          title:'新年的一年了，想买辆车，过年回老家没车太不方便了，地方的人还以为我买不起，有啥好推荐的么？10-15w左右的，偏向于SUV的',
          name: '想翻身的程序员',
          like: 16,
          comment:3
        },
        {
          title:'新年的一年了，想买辆车，过年回老家没车太不方便了，地方的人还以为我买不起，有啥好推荐的么？10-15w左右的，偏向于SUV的',
          name: '想翻身的程序员',
          like: 16,
          comment:3
        },
        {
          title:'新年的一年了，想买辆车，过年回老家没车太不方便了，地方的人还以为我买不起，有啥好推荐的么？10-15w左右的，偏向于SUV的',
          name: '想翻身的程序员',
          like: 16,
          comment:3
        },
        {
          title:'新年的一年了，想买辆车，过年回老家没车太不方便了，地方的人还以为我买不起，有啥好推荐的么？10-15w左右的，偏向于SUV的',
          name: '想翻身的程序员',
          like: 16,
          comment:3
        },
        {
          title:'新年的一年了，想买辆车，过年回老家没车太不方便了，地方的人还以为我买不起，有啥好推荐的么？10-15w左右的，偏向于SUV的',
          name: '想翻身的程序员',
          like: 16,
          comment:3
        },
        {
          title:'新年的一年了，想买辆车，过年回老家没车太不方便了，地方的人还以为我买不起，有啥好推荐的么？10-15w左右的，偏向于SUV的',
          name: '想翻身的程序员',
          like: 16,
          comment:3
        },
        {
          title:'新年的一年了，想买辆车，过年回老家没车太不方便了，地方的人还以为我买不起，有啥好推荐的么？10-15w左右的，偏向于SUV的',
          name: '想翻身的程序员',
          like: 16,
          comment:3
        },
        {
          title:'新年的一年了，想买辆车，过年回老家没车太不方便了，地方的人还以为我买不起，有啥好推荐的么？10-15w左右的，偏向于SUV的',
          name: '想翻身的程序员',
          like: 16,
          comment:3
        }
      ]
    })
    const IPSearch=(str:string)=>{
      context.emit('openDrawer',str)
    }
    return {
      ...toRefs(state),
      IPSearch,
    }
  },
})
</script>

<style lang="scss" scoped>
.right-side-container {
	width: 100%;
	height: 100%;
}
.side-header {
	width: 100%;
	height: auto;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
}
.fd-body {
	margin-top: 10px;
}
.fd-list {
	width: 100%;
	height: auto;
	display: flex;
	flex-direction: column;
	.fd-item {
		width: 100%;
		display: flex;
		flex-direction: column;
		.fd-title {
			width: 100%;
			height: 40%;
			box-sizing: border-box;
			padding: 10px;
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: 2;
			-webkit-box-orient: vertical;
			display: -moz-box;
      line-height: 40px;
			-moz-line-clamp: 2;
			-moz-box-orient: vertical;
			word-wrap: break-word;
			word-break: break-all;
			white-space: normal;
		}
		.fd-footer {
			width: 100%;
			height: 35%;
			box-sizing: border-box;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			padding: 10px;
			color: #1e80ff;
      transition: .15s all;
			.foot-left {
				font-size: 12px;
				color: #86909c;
			}
			.foot-right {
				display: flex;
				flex-direction: row;
				.right-item {
					display: flex;
					flex-direction: row;
					align-items: center;
					margin-right: 10px;
				}
			}
		}
	}
  .fd-item:hover{
    background: #e8f3ff;
  }
}
.tools-body {
	width: 100%;
	height: auto;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	align-items: center;
	box-sizing: border-box;
	padding: 10px;
	.tools-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		span {
			margin-top: 10px;
			font-size: 12px;
			color: #1e80ff;
		}
	}
}
</style>
